import React, {PureComponent} from "react";
import imgUrl from "../../../img/dark_heart.jpg";
import {connect} from "react-redux";
import {actionCreator} from "../store/index";

class ArticleListWrapper extends PureComponent {

    constructor(props) {
        super(props);
        this.handlerMouseScroll = this.handlerMouseScroll.bind(this);
    }

    render() {

        return (
            <ul>
                {
                    this.props.currentList.map((item) => {
                        
                        let  tagStyle;
                        let tagText;
                        
                        if (item.get("fresh")) {
                            tagStyle = tagShowStyle;
                            tagText ="最新";
                        }else {
                            tagStyle = item.get("tags").size === 0 ? tagDismissStyle : tagShowStyle;
                            tagText = item.get("tags").size === 0 ? null : `${item.get("tags").get(0).get("name")}`;
                        }



                        return (
                            <li style={liItemStyle} key={item.get("id")}>

                                <img style={loveHeartNormalStyle} src={imgUrl} alt={"alt"}/>

                                <div style={articleWrapperStyle}>
                                    <div style={articleTitleStyle} dangerouslySetInnerHTML={{__html:item.get("title")}}/>
                                    <div style={articleBodyStyle}>
                                        <span style={tagStyle}>{tagText}</span>
                                        <span style={artItemTitleStyle}>作者:</span>
                                        <span style={artItemContentStyle}>{item.get("author")}</span>
                                        <span style={artItemTitleStyle}>分类</span>
                                        <span style={artItemContentStyle}>{item.get("superChapterName")}</span>
                                        <span style={artItemTitleStyle} >{`时间:${item.get("niceDate")}`}</span>
                                    </div>
                                </div>

                            </li>
                        );
                    })

                }

            </ul>
        );
    }

    componentDidMount() {
        if (this.props.currentList.size === 0) {
            this.props.requestArticleData(this.props.currentIndex);
        }
        window.addEventListener("scroll", this.handlerMouseScroll);
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.handlerMouseScroll);
    }

    handlerMouseScroll() {
        const clientHeight = document.documentElement.clientHeight;
        const scrollTop = document.documentElement.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight;
        console.log(`${clientHeight} => ${scrollTop} +> ${scrollHeight}`);
        const number = Math.ceil(clientHeight + scrollTop);
        console.log(number);
        if ( number=== scrollHeight) {
            console.log("可以请求新的数据");
            if (this.props.updateTag) {
                this.props.changeUpdateTag(false);
                const currentIndex = this.props.currentIndex + 1;
                this.props.requestArticleData(currentIndex);
            } else {
                console.log("正在请求网络");
            }
        }else {

            console.log("不可以请求新的数据");
        }

    }


}

const mapState = (state) => {
    return {
        currentIndex: state.getIn(["bodyReducer", "homePageIndex"]),
        currentList: state.getIn(["bodyReducer", "homePageList"]),
        updateTag: state.getIn(["bodyReducer", "shouldUpdate"])
    };
};

const dispatchMapState = (dispatch) => {
    return {
        requestArticleData(index) {
            const action = actionCreator.getArticleData(index);
            dispatch(action);
        },
        changeUpdateTag(bool) {
            const action = actionCreator.changeUpdateTag(bool);
            dispatch(action);
        }
    };
};

export default connect(mapState, dispatchMapState)(ArticleListWrapper);


const liItemStyle = {
    display: "block",
    height: 94,
    borderBottom: "solid 1px #e2e2e2",
    paddingLeft: 30,
    cursor: "pointer",
};

const loveHeartNormalStyle = {
    float: "left",
    marginTop: 38,
};

const articleWrapperStyle = {
    float: 'left',
    marginLeft: 10,
    marginTop: 24,
    marginRight:10,

};

const articleTitleStyle = {
    color: "#2e3135",
    fontSize: 16,
    width:750,
    fontWeight: 'bold',
    textOverflow:'ellipsis',
    whiteSpace:"nowrap",
    overflow:"hidden",
};

const articleBodyStyle = {
    marginTop: 12,
};

const tagShowStyle = {
    border: "solid 1px red",
    color: "red",
    fontSize: 12,
    marginRight:10,
};

const tagDismissStyle = {
    display: "none",
};

const artItemTitleStyle = {
    fontSize: 14,
    color: "#999",
    marginRight: 10,
};

const artItemContentStyle = {
    fontSize: 14,
    color: "#484848",
    marginRight: 10,
};